<template>
  <div class="report-container">
    <Form
      :formNode="formNode"
      :formModel="formModel"
      ref="form-demo"
      :search="search"
      :reset="reset"
      :buttonLoading="buttonLoading"
    />
    <Table
      :tableData="tableData"
      :columns="columns"
      :currentChange="currentChange"
      :handleSizeChange="handleSizeChange"
    >
    </Table>
    <el-dialog title="查看详情" :visible.sync="open" width="80%" :close-on-click-modal="false" :append-to-body="true">
      <v-form-render :form-json="formJson" :form-data="formData" ref="vFormRef"></v-form-render>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Table from "@/components/Table/Table";
import Form from "@/components/Form/Form";
import { getFormAndTable,getTableData,getFormVersion,getFormDataByInstId } from "@/api/flowable/front";
export default {
  name: "report",
  components: {
    Table,
    Form,
  },
  data() {
    return {
      formId: this.$route.query.formId,
      queryTypeMap: {},
      queryBody:[],
      baseColumns: [],
      open:false,
      formJson:{},
      formData:{},
      formNode: [],
      formModel: {},
      // 表格数据
      tableData: {
        loading: false,
        data: [],
        total: 0,
        currentPage: 1, //默认当前页
        pageSize: 10, //默认每页多少条
      },
      columns: [],
      buttonLoading:false,
    };
  },
  created() {
  },
  mounted() {
    this.getFormAndTable();
    this.tableData.loading = false;
  },
  methods: {
    btnClick(row) {
      // console.log(row);
      getFormVersion(row.form_version_id).then(res1 => {
        if (res1.code === 200){
          this.formJson = JSON.parse(res1.data.formContent);
        }
        getFormDataByInstId(row.proc_inst_id).then(res2 => {
          if (res2.code === 200){
            this.open = true;
            this.$nextTick(() => {
              this.$refs.vFormRef.setFormData(JSON.parse(res2.data.submitData));
              this.$nextTick(() => {
                this.$refs.vFormRef.disableForm();
              })
            })
          }
        })
      })
    },
    //
    getData() {
      getTableData(this.formId, this.tableData.currentPage, this.tableData.pageSize, this.queryBody).then( res => {
        // console.log(res)
        if (res.code === 200){
          this.tableData.data = res.rows;
          this.tableData.total = res.total;
        }
        this.buttonLoading = false;
      })
    },
    search() {
      this.buttonLoading = true;
      this.queryBody = [];
      for (const field in this.formModel) {
        let cond = {};
        cond.queryField = field;
        cond.queryType  = this.queryTypeMap[field];
        if (Array.isArray(this.formModel[field])) {
          cond.queryValue = this.formModel[field][0];
          cond.queryValue2 = this.formModel[field][1];
        } else {
          cond.queryValue = this.formModel[field];
        }
        this.queryBody.push(cond);
      }
      // console.log(this.queryBody);
      this.getData();
    },
    // 重置
    reset() {
      this.buttonLoading = true;
      this.tableData.currentPage = 1;
      this.getFormAndTable();
    },
    // 翻页
    currentChange(val) {
      // console.log(val, "翻页");
      this.tableData.currentPage = val;
      this.search();
    },
    // 切换页数
    handleSizeChange(val) {
      // console.log(val, "切换页数");
      this.tableData.currentPage = 1;
      this.tableData.pageSize = val;
      this.search();
    },
    getFormAndTable() {
      this.formNode = [];
      this.queryTypeMap = {};
      this.columns = [];
      let dataFormModel = {};

      let operate = {
        dataName: "operate",
        label: "操作",
        formatter: (row, cell, cellValue) => {
          return <div><a class="el-icon-view search-icon-style" onClick={() => {this.btnClick(row);}}>查看详情</a> &nbsp;&nbsp;&nbsp;
          <a class="el-icon-download search-icon-style" onClick={() => {this.exportPdf(row);}}>下载pdf</a></div>;
        },
      }

      getFormAndTable(this.formId).then((res) => {
        if (res.code === 200) {
          // 处理数据 存放 formmodel
          res.data.searchForms.map((item, index) => {
            if (!dataFormModel[item.modelName]) {
              dataFormModel[item.modelName] = item.defaultValue ? item.defaultValue : '';
            }
            this.queryTypeMap[item.modelName] = item.queryType;
            item.optional = item.optional && JSON.parse(item.optional);
          });
          this.formNode = res.data.searchForms;
          this.columns = res.data.tableColumns;
          this.columns.push(operate);
          this.formModel = dataFormModel;
          this.search();
        }
      });
    },
    exportPdf(row){
      this.download('flowable/procInst/exportPdf',{processInstanceId:row.proc_inst_id},`${new Date().getTime()}.pdf`)
    }
  },
};
</script>
<style lang="scss">
.report-container {
  width: 100%;
  height: 100%;
  padding: 15px;
  .search-icon-style{
    color: #46a6ff;
  }
}
</style>
